<template>
  <div class="bg-bg-secondary rounded-lg p-6 shadow-sm">
    <div
      :class="
        centered
          ? 'flex flex-wrap gap-3 justify-center'
          : 'flex flex-wrap gap-3'
      "
    >
      <n-button
        :type="modelValue === 'all' ? 'primary' : 'default'"
        @click="updateCategory('all')"
      >
        {{ allLabel }}
      </n-button>
      <n-button
        v-for="category in categories"
        :key="category.value"
        :type="modelValue === category.value ? 'primary' : 'default'"
        @click="updateCategory(category.value)"
      >
        {{ category.label }}
      </n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 定义类型
interface Category {
  label: string;
  value: string;
}

// 定义组件的props
const props = defineProps({
  // 当前选中的分类
  modelValue: {
    type: String,
    required: true,
  },
  // 分类列表，每个分类包含label和value属性
  categories: {
    type: Array as unknown as () => Category[],
    required: true,
  },
  // "全部"按钮的标签
  allLabel: {
    type: String,
    default: "全部",
  },
  // 是否居中显示
  centered: {
    type: Boolean,
    default: false,
  },
});

// 定义emit
const emit = defineEmits(["update:modelValue"]);

// 更新所选分类
const updateCategory = (value: string) => {
  emit("update:modelValue", value);
};
</script>
